import 'package:bottom_picker/bottom_picker.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:sports_new/controller/live/live_create_logic.dart';
import 'package:sports_new/resources/colours.dart';
import 'package:sports_new/resources/styles.dart';
import 'package:sports_new/utils/date_time_utils.dart';
import 'package:sports_new/utils/image_utils.dart';
import 'package:sports_new/utils/utils.dart';
import 'package:sports_new/widgets/card.dart';
import 'package:sports_new/widgets/picker_local.dart';
import 'package:sports_new/widgets/base/qkd_image.dart';
import 'package:sports_new/widgets/base/qkd_text.dart';
import 'package:sports_new/widgets/base/qkd_time_picker.dart';

import '../../widgets/max_bottom_sheet.dart';
import '../../widgets/base/qkd_button.dart';
import '../../widgets/select_bottomsheet.dart';

class LiveCreatePage extends StatefulWidget {
  const LiveCreatePage({super.key});

  @override
  State<LiveCreatePage> createState() => _LiveCreatePageState();
}

class _LiveCreatePageState extends State<LiveCreatePage> {
  final LiveCreateLogic logic = Get.put(LiveCreateLogic());

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LiveCreateLogic>(
      builder: (logic) {
        return Scaffold(
          backgroundColor: Colours.greyF2F3F7,
          appBar: Styles.appBar(
            title: const QkdText("创建直播"),
          ),
          body: SafeArea(
            child: Column(
              children: [
                Block(
                  cardStyle: const CardStyle(
                    margin: EdgeInsets.fromLTRB(8, 8, 8, 0),
                    padding: EdgeInsets.symmetric(horizontal: 12)
                  ),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          const QkdText("直播标题"),
                          Container(width: 12),
                          Expanded(
                            child: TextFormField(
                              focusNode: logic.focus,
                              onTap: logic.focus.requestFocus,
                              controller: logic.titleController,
                              onChanged: (value) => logic.title = value,
                              onTapOutside: (event) => logic.focus.unfocus(),
                              style: const TextStyle(
                                fontSize: 16,color: Colours.text
                              ),
                              decoration: const InputDecoration(
                                border: InputBorder.none,
                                hintText: "请输入4-15字标题",
                                contentPadding: EdgeInsets.zero,
                                hintStyle: TextStyle(fontSize: 14, color: Colours.grey99)
                              ),
                              autovalidateMode: AutovalidateMode.onUserInteraction,
                              validator: logic.validateTitle,
                            ),
                          )
                        ],
                      ),
                      const Divider(color: Colours.greyEE,height: 0.5),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const QkdText("视频封面",needCenter: true),
                          Container(width: 12),
                          GestureDetector(
                            onTap: logic.chooseCover,
                            child: logic.cover.hasValue?
                            QkdImage(
                              imageUrl: logic.cover!,
                              width: 176,
                              height: 100,
                              fit: BoxFit.cover,
                              radius: 8,
                            ):
                            Image.asset(
                            Utils.getImgPath("add_photo_rect.png"),
                            width: 176,
                            height: 100
                            )
                          )
                        ],
                      ).paddingSymmetric(vertical: 16),
                    ],
                  )
                ),
                Block(
                  cardStyle: const CardStyle(
                    margin: EdgeInsets.fromLTRB(8, 8, 8, 0),
                    padding: EdgeInsets.symmetric(horizontal: 12)
                  ),
                  child: Column(
                    children: [
                      SizedBox(
                        height: 52,
                        child: Row(
                          children: [
                            const QkdText("直播分类"),
                            Container(width: 12),
                            GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () => logic.sportsId = 1,
                              child: Row(
                                children: [
                                  Image.asset(
                                    Utils.getImgPath(logic.sportsId == 1
                                        ? 'check.png'
                                        : 'uncheck.png'),
                                    width: 14,
                                    height: 14,
                                  ),
                                  const SizedBox(width: 3),
                                  const QkdText('足球', color: Colours.grey66)
                                ],
                              ),
                            ),
                            const SizedBox(width: 16),
                            GestureDetector(
                              behavior: HitTestBehavior.opaque,
                              onTap: () => logic.sportsId = 2,
                              child: Row(
                                children: [
                                  Image.asset(
                                    Utils.getImgPath(logic.sportsId == 2
                                        ? 'check.png'
                                        : 'uncheck.png'),
                                    width: 14,
                                    height: 14,
                                  ),
                                  const SizedBox(width: 3),
                                  const QkdText('篮球',color: Colours.grey66)
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                      const Divider(color: Colours.greyEE,height: 0.5),
                      SizedBox(
                        height: 52,
                        child: Row(
                          children: [
                            const QkdText("开播时间"),
                            Container(width: 12),
                            GestureDetector(
                              onTap: () async{
                                DateTime? result = await Get.bottomSheet(
                                  const QkdTimePicker(title: "请选择开播时间"),
                                );
                                if(result != null) {
                                  logic.time = result.copyWith(year: DateTime.now().year);
                                }
                              },
                              child: logic.time != null?
                              QkdText("${logic.time!.formatedString("MM月dd日 HH时mm分")}",
                                fontSize: 16, color: Colours.text,
                              ):
                              const QkdText("请选择开播时间",
                                fontSize: 14,color: Colours.grey99,
                              )
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                const Spacer(),
                Container(
                  color: Colours.white,
                  padding: const EdgeInsets.symmetric(horizontal: 20,vertical: 12),
                  child: QkdButton(
                    width: double.infinity,
                    height: 48,
                    enable: logic.allDone,
                    backgroundColor: Colours.main,
                    foregroundColor: Colours.white,
                    borderRadius: 8,
                    onPressed: logic.create,
                    text: '立即创建',
                  ),
                )
              ],
            ),
          ),
        );
      }
    );
  }

}
